// 宽
.w-100 {
    width: 100%;
}

// 高
.h-100 {
    height: 100%;
}

.db-bold {
    font-weight: bold !important;
}

.db-pointer {
    cursor: pointer;
}

.db-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-ellipsis2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.db-ellipsis3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.db-line-through {
    text-decoration: line-through;
}

.db-underline {
    text-decoration: underline;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-justify {
    text-align: justify !important;
}

.flex {
    display: flex;
}

.flex-align {
    align-items: center;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-1 {
    flex: 1;
}

$flex-jc: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, );
$flex-ai: (start: flex-start, end: flex-end, center: center, stretch: stretch, );
//flex
@each $key,
$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

@each $key,
$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

//对齐方式
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

//定位方式
@each $key,
$var in (r:relative, a:absolute, f:fixed) {
    .position-#{$key} {
        position: $var !important;
    }
}

$fontSize:10,
12,
14,
16,
18,
20,
22,
24,
26,
28,
30,
32,
34,
36,
40,
46,
48,
50,
52,
54,
56,
58,
60,
100;
//字体大小
@each $var in ($fontSize) {
    .font-#{$var} {
        font-size: #{$var}px !important;
    }
}

$px:0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
30,
40,
60,
80,
100;
//外边距
@each $var in ($px) {
    .margin-r-#{$var} {
        margin-right: #{$var}px !important;
    }
    .margin-l-#{$var} {
        margin-left: #{$var}px !important;
    }
    .margin-b-#{$var} {
        margin-bottom: #{$var}px !important;
    }
    .margin-t-#{$var} {
        margin-top: #{$var}px !important;
    }
}

//内边距
@each $var in ($px) {
    .padding-r-#{$var} {
        padding-right: #{$var}px !important;
    }
    .padding-l-#{$var} {
        padding-left: #{$var}px !important;
    }
    .padding-b-#{$var} {
        padding-bottom: #{$var}px !important;
    }
    .padding-t-#{$var} {
        padding-top: #{$var}px !important;
    }
}

$lineHeight: 12,
14,
16,
18,
20,
22,
24,
26,
28,
30,
32,
34,
36,
40,
46,
48,
50,
52,
54,
56,
58,
60,
100;
//行高
@each $var in ($lineHeight) {
    .line-h-#{$var} {
        line-height: #{$var}px !important;
    }
}

//层级
@each $var in (1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 9999) {
    .z-#{$var} {
        z-index: #{$var} !important;
    }
}

//图片大小
// @media screen and (min-width: 800px) and (max-width: 1200px) {
//     .db-pointer {
//         width: 80vw;
//     }
// }
// @media screen and (min-width: 300px) and (max-width: 800px) {
//     div {
//         width: 100vw;
//     }
// }